<template>
  <view class="page">
    <view class="header">活动</view>
    <view class="tabs">
      <view v-for="(t,i) in tabList" :key="i" class="tab" :class="{on: currentTab===t.key}" @click="currentTab=t.key">{{ t.label }}</view>
    </view>
    <view class="list">
      <view v-for="(act, i) in filtered" :key="i" class="card" :class="statusClass(act)">
        <view class="title">{{ act.title }}</view>
        <view class="meta">{{ act.date }} · {{ act.place }}</view>
        <view class="status">{{ statusText(act) }}</view>
        <button v-if="canJoin(act)" size="mini" class="btn" @click="join(act)">报名/参加</button>
      </view>
      <view v-if="filtered.length===0" class="empty">暂无该分类活动</view>
    </view>
  </view>
  
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { setStorage, getStorage } from '../../utils/storage';

type Activity = { id: string; title: string; date: string; place: string };

const activities = ref<Activity[]>([
  { id: 'a1', title: '正念冥想工作坊', date: '2025-11-03', place: '线下·怡心馆' },
  { id: 'a2', title: '声音疗愈圈', date: '2025-11-05', place: '线下·松语空间' },
  { id: 'a3', title: '呼吸疗愈体验', date: '2025-11-12', place: '线下·云水间' }
]);

const PARTICIPATE_KEY = 'ACTIVITY_PARTICIPATE';

const join = (act: Activity) => {
  const store = getStorage(PARTICIPATE_KEY) || {};
  const list: Activity[] = store[act.date] || [];
  const exists = list.some((x: Activity) => x.id === act.id);
  if (!exists) {
    list.push(act);
    store[act.date] = list;
    setStorage(PARTICIPATE_KEY, store);
    uni.showToast({ title: '已标记参加', icon: 'success' });
  } else {
    uni.showToast({ title: '已参加该活动', icon: 'none' });
  }
};

// 分类逻辑
const now = new Date();
function compareDateStr(d: string) {
  return new Date(d).getTime();
}
const store = () => getStorage(PARTICIPATE_KEY) || {};
const isJoined = (act: Activity) => {
  const s = store();
  const list = s[act.date] || [];
  return list.some((x: any) => x.id === act.id);
};
const isDeadline = (act: Activity) => false; // 可根据后台字段控制，此处示例固定为false
const isFinished = (act: Activity) => compareDateStr(act.date) < now.getTime();

const tabList = [
  { key: 'ongoing-unjoined', label: '举办中未报名' },
  { key: 'ongoing-joined', label: '举办中已报名' },
  { key: 'ongoing-deadline', label: '举办中截止报名' },
  { key: 'finished', label: '活动已结束' }
];
const currentTab = ref(tabList[0].key);

const filtered = computed(() => {
  return activities.value.filter(a => {
    const finished = isFinished(a);
    if (currentTab.value === 'finished') return finished;
    if (finished) return false;
    if (currentTab.value === 'ongoing-unjoined') return !isJoined(a) && !isDeadline(a);
    if (currentTab.value === 'ongoing-joined') return isJoined(a);
    if (currentTab.value === 'ongoing-deadline') return isDeadline(a);
    return true;
  });
});

const canJoin = (a: Activity) => !isFinished(a) && !isDeadline(a) && !isJoined(a);
const statusText = (a: Activity) => {
  if (isFinished(a)) return '已结束';
  if (isDeadline(a)) return '报名截止';
  if (isJoined(a)) return '已报名';
  return '进行中';
};
const statusClass = (a: Activity) => {
  if (isFinished(a)) return 'finished';
  if (isDeadline(a)) return 'deadline';
  if (isJoined(a)) return 'joined';
  return 'ongoing';
};
</script>

<style lang="scss">
.page { min-height: 100vh; background: #314039; }
.header { padding: 24rpx; font-size: 32rpx; font-weight: 600; }
.tabs { display: flex; padding: 8rpx 12rpx; gap: 12rpx; }
.tab { padding: 14rpx 20rpx; background: #fff; border-radius: 999rpx; font-size: 26rpx; color: #666; }
.tab.on { background: #a8c6df; color: #fff; }
.list { padding: 20rpx; }
.card { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx; }
.card.joined { outline: 2rpx solid #a8c6df; }
.card.deadline { opacity: 0.7; }
.card.finished { opacity: 0.5; }
.title { font-size: 30rpx; font-weight: 600; color: #333; }
.meta { margin-top: 8rpx; color: #888; font-size: 26rpx; }
.btn { margin-top: 16rpx; }
.status { margin-top: 8rpx; font-size: 24rpx; color: #999; }
.empty { text-align: center; color: #999; padding: 60rpx 0; }
</style>


